<template>
    <div class="coupon">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>营销活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>优惠券包设置</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="easy-content">
          <div class="coupon-top">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-dropdown @command="setType_state">
                  <span class="el-dropdown-link">
                    {{typeStr_state}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
                    <el-dropdown-item :command="{title:'代金券',id:'1'}">启动</el-dropdown-item>
                    <el-dropdown-item :command="{title:'折扣券',id:'2'}">禁用</el-dropdown-item>                                     
                  </el-dropdown-menu>
                </el-dropdown>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入券包名称"
                  v-model="search"
                  clearable></el-input>
              </el-form-item>              
              <!-- 查询 -->
              <el-form-item>
                <el-button type="primary"
                  @click.native="_reset"
                  size="small"
                  style="width:60px">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-form-item>
              <el-form-item class="fr" v-has="'marketingbagredact'">
                <el-button type="primary"
                  size="small"
                  style="width:60px"
                  @click="add">
                  新增
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="tableData" max-height="550">
            <el-table-column fixed prop="id" label="id" width='50'>
            </el-table-column>
            <el-table-column  prop="name" label="券包名称">
            </el-table-column>
            <el-table-column label="关联优惠券">
              <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.coupon }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.coupon }}</el-tag>
                </div>
              </el-popover>
            </template>
            </el-table-column>
            <el-table-column  prop="couponNum" label="优惠券数量">
            </el-table-column>
            <el-table-column prop="person"  label="创建人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="stateName" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
                <el-button @click="See(scope.row)" type="text" size="small">查看</el-button>
                <el-button v-if="scope.row.state == 1" @click="disabled(scope.row)" type="text" size="small" v-has="'marketingbagstate'">禁用</el-button>
                <el-button v-if="scope.row.state == 2" @click="disabled(scope.row)" type="text" size="small" v-has="'marketingbagstate'">启动</el-button>
            </template>
            </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10,20,30,40]"
              :page-size="pageSize"
              layout="total, prev , pager , next, sizes"
              :total="total"
              style="margin-top:20px">
            </el-pagination>    
        </div>
         <!-- 查看弹出框 -->
        <el-dialog title="查看券包" :visible.sync="dialogVisible2" width="900px">
            <el-form>
                <el-form-item label="券包名称">
                  <span>{{tableData2_name}}</span>
                </el-form-item>      
            </el-form>        
            <el-table :data="tableData2" style="width: 100%" height="250">            
                <el-table-column
                prop="typeName"
                label="券类型"
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="券名称"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                label="券说明"
                show-overflow-tooltip>
                 <template slot-scope="scope">
                    <span v-if="scope.row.type ==1">{{scope.row.faceValue}}元</span>
                    <span v-if="scope.row.type ==2">{{Math.round(scope.row.faceValue * 10) / 100.0}}折</span>
                    <span  v-if="scope.row.type ==3">{{scope.row.faceValue}}</span>
                  </template>
                </el-table-column>
                 <el-table-column
                prop="doorsillMoneyName"
                label="使用门槛" width="150px"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                prop="scopeName"
                label="适用范围" width="150px"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="有效期" width="200px">
                  <template slot-scope="scope">
                    <span v-if="scope.row.indateStart!==''||scope.row.indateEnd!=''">
                       {{(scope.row.indateStart).substring(0,10)}} 至 {{(scope.row.indateEnd).substring(0,10)}}
                    </span>  
                    <span v-if="scope.row.indateDay!=null">
                      {{scope.row.indateDay}}天
                    </span>                 
                  </template>
                </el-table-column>
                <el-table-column
                prop="stateName"
                label="状态"
                show-overflow-tooltip>
                </el-table-column>
            </el-table>       
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="SeeSure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
  GetCouponPackage,
  StateCouponPackage,
  PullCouponPackage
} from "@/public/js/saleRoom";
import { create } from "domain";
export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      type: "",
      state: "",
      typeStr_state: "全部状态",
      search: "",
      doorsill: "1",
      scope: "1",
      total: 0,
      pageNo: 1,
      bagId: "",
      pageSize2: 2,
      pageNum2: 1,
      type2: "",
      state2: "",
      search2: "",
      doorsill2: "1",
      scope2: "1",
      tableData: [],
      tableData2: [],
      tableData2_name: "",
      gridData: [],
      dialogVisible2: false,
      formLabelWidth: "120px"
    };
  },
  created() {
    this._GetCouponPackage();
  },
  mounted() {},
  methods: {
    // 获取券包
    _GetCouponPackage() {
      var data = {
        // bagId: this.bagId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type,
        search: this.search,
        state: this.state
      };
      GetCouponPackage(data).then(res => {
        this.tableData = res.data.bagList;
        this.total = res.data.total;
        this.tableData.forEach(item => {
          item.couponNum = item.couponNum + "张";
        });
      });
    },
    //查询
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._GetCouponPackage();
    },
    // 新增
    add() {
      this.$router.push("/index/AddCouponPackage");
    },
    // 查看
    See(row) {
      var data = {
        bagId: row.id,
        search: this.search
      };
      var arr = [];
      this.tableData2_name = row.name;

      PullCouponPackage(data).then(res => {
        // this.tableData2 = res.data.discountCouponList;
        console.log(res.data);
        res.data.discountCouponList.forEach(item => {
          if (item.check == true) {
            arr.push(item);
          }
        });
        this.tableData2 = arr;
      });
      this.dialogVisible2 = true;
      //this.$router.push("/index/SeeCouponPackage");
      // sessionStorage.setItem("userInfo", JSON.stringify(row));
    },
    // 禁用
    disabled(row) {
      var text = row.state == 1 ? "禁用" : "启动";
      this.$confirm("此操作将" + text + "该优惠券, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var state;
          if (row.state == 2) {
            state = 1;
          } else {
            state = 2;
          }
          var data = {
            id: row.id,
            state: state
          };
          StateCouponPackage(data).then(res => {
            if (res.data.errCode == 0) {
              this.$message({
                type: "success",
                message: text + "成功!"
              });
              row.check = true;
              this._GetCouponPackage();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + text
          });
        });
    },
    // 全部状态下拉选择
    setType_state(e) {
      this.search = "";
      this.state = e.id;
      e.id == 1
        ? (this.typeStr_state = "启动")
        : e.id == 2
        ? (this.typeStr_state = "禁用")
        : (this.typeStr_state = "全部类型");
      this._reset();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this._GetCouponPackage();
    },
    handleCurrentChange(value) {
      this.pageNum = value;
      this._GetCouponPackage();
    },
    SeeSure() {
      this.dialogVisible2 = false;
    }
  }
};
</script>
<style lang="scss">
.coupon {
  .el-dialog {
    width: 600px;
    .el-form-item__content {
      width: 315px;
    }
  }
}
</style>
